<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link type="text/css" href="jianli/style.css" rel="stylesheet" />

    <script type="text/javascript" src="jianli/tools.js"></script>
    <script type="text/javascript" src="jianli/js.js"></script>
    <style>
         body{
          margin: 0 auto ;
           width: 75%;
          padding: 20px;
          background-color: rgb(252, 244, 244);
        }
        a{
		text-decoration:none;
        color: black;
        }
        .container1{
            position: fixed;
            width: 75%;
            margin-bottom: 10px;
            border-radius: 20px;
            display: grid;
            grid-template-columns:15% 15% 15% 15% 15% 15%;
            grid-template-rows: 40px 20px ;
            grid-column-gap: 0px;
            grid-row-gap: 0px;
            text-align: center;
            background-image: url(img/背景.jpg);
            
            
        }
        /* .menu1{
            background-color: rgb(250, 253, 253);
            }
        .menu2{
            background-color: rgb(250, 253, 253);
            
            }
        .menu3{
            background-color: rgb(250, 253, 253);
            
            }
        .menu4{
            background-color:rgb(250, 253, 253);
            
            }
        .menu5{
            background-color: rgb(250, 253, 253);
            
            }
        .menu6{
            background-color:rgb(250, 253, 253);
            } */
        .container2{
            margin-top: 100px;
            display: grid;
            grid-template-columns:45% 55%;
            grid-template-rows: 400px 400px ;
            grid-column-gap: 100px;
            grid-row-gap: 10px;
            color: rgb(27, 27, 27);
            box-shadow:60px 50px 100px darkgray;
        } 

        .mingzi{
            text-align: center;
            width: 60%;
            height: 60%;
            transition: all 2s;
            position:relative;
	         animation:myfirst 5s;
	        -webkit-animation:myfirst 6s;
        }
        .mingzi:hover {
        width: 60%x;
       height: 60%;
       transform: translateX(200px) translateY(200px) scale(0.5) rotate(150deg);
        }
        @keyframes myfirst
{
	0%   {left:0px; top:0px;}
	25%  {left:200px; top:0px;}
	50%  { left:200px; top:200px;}
	75%  {left:0px; top:200px;}
	100% { left:0px; top:0px;}
}

@-webkit-keyframes myfirst 
{
	0%   {left:0px; top:0px;}
	25%  { left:200px; top:0px;}
	50%  { left:200px; top:200px;}
	75%  { left:0px; top:200px;}
	100% { left:0px; top:0px;}
}
        .imgbox{
           text-align: center;
           height:100% ;
           width: 100%;
           
        } 
        .container3{
            display: grid;
            grid-template-columns:60% 40%;
            grid-template-rows: 300px 300px ;
            grid-column-gap: 10px;
            grid-row-gap: 10px;
            color: rgb(31, 31, 30);
            box-shadow:60px 50px 100px darkgray;
           
        }
       
.gerenxinxi{
     position:relative;
	        animation:myfirst 5s;
	        -webkit-animation:myfirst 5s;
}
 @keyframes myfirst
{
	0%   { left:-110px; top:0px;}
	100% { left:0px; top:0px;}
}

@-webkit-keyframes myfirst 
{
	0%   { left:-110px; top:0px;}
	
	100% {left:0px; top:0px;}
}
        .container4{
            display: grid;
            grid-template-columns:100%;
            grid-template-rows: 200px 500px ;
            grid-column-gap: 10px;
            grid-row-gap: 10px;
            color: rgb(12, 12, 12);
            box-shadow:60px 50px 100px darkgray;
        }
        .container5{
            display: grid;
            grid-template-columns:80%;
            grid-template-rows: 300px ;
            grid-column-gap: 20px;
            grid-row-gap: 20px;
            text-align: center;
            box-shadow:60px 50px 100px darkgray;
        }
        .container6{
            display: grid;
            grid-template-columns:100%;
            grid-template-rows: 300px 300px;
            grid-column-gap: 20px;
            grid-row-gap: 20px;
            box-shadow:60px 50px 100px darkgray;
        }
        .huidaozhidingtubiao{
           text-align: initial;
           position: fixed;
           width: 70px;
           height: 70px;
           right: 70px;
           bottom: 60px;
           background-color:rgb(13, 238, 238) ;
           border-radius: 50%;
        }
        h2{
            background-color: rgb(90, 147, 253);
           line-height: 15px;
           padding: 15px;
           border-radius: 10px;
           box-shadow:4px 4px 4px darkgray;
        }
        /* @media screen and (min-width: 1200px)
        .container1{ width: 1100px; }.container,.container3{width: 730px;}.container4,.container5,.container6{width:310px}
        } 
        @media screen and (min-width: 960px) and (max-width: 1199px) {
        .container1{ width: 960px; }.container,.container3{width: 680px;}.container4,.container5,{width:270px}.container6{max-width:200px}
        }
        @media screen and (min-width: 768px) and (max-width: 959px) {
            .container1{ width: 900px; }.container,.container3{width: 630px;}.container4,.container5,{width:240px}.container6{max-width:180px}
        }
        @media only screen and (min-width: 480px) and (max-width: 767px){
            .container1{ width: 450px; }.container,{width: 460px;position: relative; }.container3{display:none}.container4{width: 450px; }.container5 {padding-right:5px}#access a img{display:none}#rss{display:none}.container4{display:none}
        }
        @media only screen and (max-width: 479px) {
            .container1{ width: 300px; }.container,.container3{width: 330px;}#secondary{display:none}.container4{width: 350px;} #access a {padding-right:10px;padding-left:10px}#access a img{display:none}#rss{display:none}#branding #s{display:none}#access ul ul a{width:100px}
        } */ 

    </style>
</head>
<body>
    
    <div class="container1" id="dingbu">
        <div class="menu1"></div>
        <div class="menu2">
            <a href="#gerenxinxi">
                <FONT style="FONT-SIZE: 25pt; FILTER: shadow(COLOR=white); WIDTH: 90%; COLOR: #161515; LINE-HEIGHT: 120%; FONT-FAMILY: 华文行楷" size=15>
              个人信息
                </FONT>
            </a>
        </div>
        <div class="menu3">
            <a href="#jiaoyubeijing">
                <FONT style="FONT-SIZE: 25pt; FILTER: shadow(COLOR=rgb(17, 16, 16)); WIDTH: 90%; COLOR: #161515; LINE-HEIGHT: 120%; FONT-FAMILY: 华文行楷" size=15>
                    教育背景
                      </FONT></a>
        </div>
        <div class="menu4">
            <a href="#gongzuojingyan">
                <FONT style="FONT-SIZE: 25pt; FILTER: shadow(COLOR=rgb(22, 21, 21)); WIDTH: 90%; COLOR: #161515; LINE-HEIGHT: 120%; FONT-FAMILY: 华文行楷" size=15>
                    工作经验
                      </FONT>
                    </a>
        </div>
        <div class="menu5">
            <a href="#ziwojieshao">
                <FONT style="FONT-SIZE: 25pt; FILTER: shadow(COLOR=white); WIDTH: 90%; COLOR: #161515; LINE-HEIGHT: 120%; FONT-FAMILY: 华文行楷" size=15>
                自我介绍
                  </FONT>
                </a>
        </div>
        <div class="menu6"></div> 
        <span class="et-hero-tab-slider"></span> 
    </div>


    <hr/>
    <div class="container2">
        <div class="imgbox">
            <img src="img/头像.jpg" width="400"></br>
          </div>
        <div class="mingzi">
            <font size="15">
                <FONT style="FONT-SIZE: 200pt; FILTER: shadow(COLOR=white); WIDTH: 90%; COLOR: #353434; LINE-HEIGHT: 120%; FONT-FAMILY: 华文行楷" size=15>
                    薛晨
                </FONT>
             </font><br >
        </div>
    </div>
    <hr/>
  
    <h2><i> <FONT style="FONT-SIZE: 25pt; FILTER: shadow(COLOR=white); WIDTH: 100%; COLOR: #161515; LINE-HEIGHT: 120%; FONT-FAMILY: 华文行楷" size=15>
        个人信息
          </FONT></a></i></h2>
    <div class="container3" id="gerenxinxi">
        <div class="tupian1">
            <img src="img/图片1.jpg" width="400"></br>
        </div>
        <div class="tupian2">
            <img src="img/图片2.jpg" width="300"></br>
        </div><div class="gerenxinxi">
            <FONT style="FONT-SIZE: 25pt; FILTER: shadow(COLOR=white); WIDTH: 90%; COLOR: #181717; LINE-HEIGHT: 120%; FONT-FAMILY: 华文行楷" size=15>
                <li><b>姓名：</b>薛晨</li>
                <li><b>生日：</b>1999年11月10日</li>
                <li><b>电话：</b>15210087489</li>
                <li><b> qq号码:</b>2363277058</li>
                <li><b>邮箱：</b>2363277058@qq.com</li>
                <li><b>个人爱好：</b>乒乓球，电子竞技，吃喝玩乐</li>
               </ul>
                  </FONT></a><ul>
                
        </div>
        <div class="tupian3">
            <img src="img/图片3.jpg" width="300"></br>
        </div>
    </div>
    <hr/>
     <h2><i>
        <FONT style="FONT-SIZE: 25pt; FILTER: shadow(COLOR=white); WIDTH: 100%; COLOR: #161515; LINE-HEIGHT: 120%; FONT-FAMILY: 华文行楷" size=15>
            教育背景
              </FONT></a>
            </i></h2>
    <div class="container4" id="jiaoyubeijing"> 
         <FONT style="FONT-SIZE: 25pt; FILTER: shadow(COLOR=white); WIDTH: 100%; COLOR: #0e0d0d; LINE-HEIGHT: 120%; FONT-FAMILY: 华文行楷" size=15>
        <table width="100%">
            <tr>
              <td>时间</td>
              <td>学校</td>
              <td>职务</td>
            </tr>
            <tr>
              <td>2018</td>
              <td>上海对外经贸大学</td>
              <td>普通学生</td>
            </tr>
            <tr>
              <td>2019</td>
              <td>上海对外经贸大学</td>
              <td>好学生</td>
            </tr>
            <tr>
              <td>2020</td>
              <td>上海对外经贸大学</td>
              <td>学生</td>
            </tr>
            </table>
          </FONT></a>
          <div class="wrap" id="wrap">
            <ul class="content"></ul>
            <a href="javascript:;" class="prev">&#60;</a>
            <a href="javascript:;" class="next">&#62;</a>
        </div>
        </div>
    <hr/>
    <h2><i>
        <FONT style="FONT-SIZE: 25pt; FILTER: shadow(COLOR=white); WIDTH: 100%; COLOR: #161515; LINE-HEIGHT: 120%; FONT-FAMILY: 华文行楷" size=15>
            工作经验
              </FONT></a>
            </i></h2>
    <div class="container5" id="gongzuojingyan">
        <FONT style="FONT-SIZE: 50pt; FILTER: shadow(COLOR=white); WIDTH: 90%; COLOR: #0e0d0d; LINE-HEIGHT: 120%; FONT-FAMILY: 华文行楷" size=15>
            暂时没有，相信以后会有的
              </FONT></a>
      </div>
     <hr/>
    <h2><i>
        <FONT style="FONT-SIZE: 25pt; FILTER: shadow(COLOR=white); WIDTH: 100%; COLOR: #131212; LINE-HEIGHT: 120%; FONT-FAMILY: 华文行楷" size=15>
            自我介绍
              </FONT></a>
            </i></h2>
    <div class="container6" id="ziwojieshao">
        <FONT style="FONT-SIZE: 20pt; FILTER: shadow(COLOR=white); WIDTH: 100%; COLOR: #111010; LINE-HEIGHT: 120%; FONT-FAMILY: 华文行楷" size=15>
            吃苦耐劳，对待工作一丝不苟并且十分热情的工作。
            做事脚踏实地，追求成功 。
            <p>基本能力：</p>
            <ul>
                <li>数学基础较好</li>
                <li>英语已过四六级</li>
                <li>掌握基础的会计知识</li>
                <li>掌握一些基础的资产评估知识</li>
            </ul>
            <p>掌握的技术：</p>
            <ul>
                <li>简单的Python</li>
                <li>会一点C语言</li>
                <li>html也会一点</li>
                <li>access也简单掌握</li>
                <li>基础的office</li>
            </ul>
           
            
              </FONT></a>
      </div>
    <!-- </main>
    <div class="huidaozhidingtubiao">
        <a href="#dingbu">回到顶端</a>   -->
      </div>
      <script src="jianli/jquery.min.js"></script>
      <script src="jianli/lanrenzhijia.js"></script>
      <script>
      $(function(){	
          scrolltotop.offset(100,120);
          scrolltotop.init(); 
      });	
      </script>
      <body bgcolor="#FFFFFF" style="height:3000px;">
          <div id="topcontrol" style="position: fixed; bottom: 120px; right: 100px; cursor: pointer; display:none;" title="">
              <img src="img/top.jpg" width="40" height="40" />
          </div>
          <script src='js/three.min.js'></script>
          <h2>
            <a href="tmp2.html">suibe官网布局简单模拟</a>
          </h2>

</body>
</html>